<template>
  <div>
    <h1>App</h1>
    <div v-text="msg"></div>
    <hr />
    <div v-html="msg"></div>
    <hr />

    <div v-pre>{{ msg }}</div>

    <hr />
    <button>{{ count }}</button>
    <button v-once @click="count++">{{ count }}</button>

    <button v-memo="[count]" @click="sonName += '~'">{{ sonName }}</button>
    <hr />

    <!-- 
      v-memo="[count]" 
        当前App组件重新渲染时，上次的count与这次的count改变才会引起Hello的更新
     -->
    <Hello v-memo="[count]" :name="sonName" />
  </div>
</template>

<script>
import Hello from "./Hello.vue";

export default {
  name: "App",

  components: {
    Hello,
  },

  data() {
    return {
      sonName: "张三",
      count: 1,
      msg: "<button>点我</button>",
    };
  },
};
</script>
